<template>
    <view class="page over-auto-y column">
        <hj-navbar title="修改联系方式" />
        <!-- 内容区 -->
        <view class="flex-auto w100 pl-30 pr-30 over-auto-y">
            <view class="info-list flex">
                <view class="pr-20 height align-center">联系电话</view>
                <view class="flex-auto info-in">
                    <view class="height align-center">
                        <up-input
                            placeholder="请输入手机号码"
                            v-model="phone"
                            fontSize="28rpx"
                            :clearable="true"
                            :maxlength="11"
                            type="number"
                            @focus="phoneTips = ''"
                            @blur="handleBlurName"
                        ></up-input>
                    </view>
                    <view v-if="phoneTips" class="ft-24 error-msg pt-4">
                        {{ phoneTips }}
                    </view>
                </view>
            </view>
        </view>
        <view class="p-30 pb-20">
            <up-button
                type="primary"
                :loading="butLoading"
                loadingText="提交中"
                @click="submit"
                shape="circle"
                class="but"
            >
                <view class="t-w ft-30 bold center">提交</view>
            </up-button>
        </view>
        <!-- 底部安全区域 -->
        <hj-safe-footer />
    </view>
</template>

<script setup>
/**
 * @description 修改电话
 * @author yinzhi
 * @date 2025-05
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { test } from '@/uni_modules/uview-plus'
import { logger } from '@/utils/log.js'
import { updateOrderApi } from '@/libs/api/orderApi.js'
const orderNo = ref('')
// 表单内容
const phone = ref('')
// 表单错误提示
const phoneTips = ref('')
// 按钮loading
const butLoading = ref(false)

// 提交事件
const submit = async () => {
    if (phone.value === '') {
        phoneTips.value = '请填写手机号'
    } else if (!test.mobile(phone.value)) {
        phoneTips.value = '请填写正确的手机号'
    } else {
        phoneTips.value = ''
    }
    if (phoneTips.value) {
        return
    }
    if (butLoading.value) return
    butLoading.value = true
    try {
        await updateOrderApi({
            contactPhone: phone.value,
            orderNo: orderNo.value
        })
        uni.$emit('upDataOrder', {
            orderNo: orderNo.value,
            isEdit: true
        })
        uni.showToast({
            title: '修改成功',
            duration: 2000,
            icon: 'none'
        })
        let time = setTimeout(() => {
            uni.navigateBack({
                delta: 1
            })
            clearTimeout(time)
        }, 1500)
    } catch (error) {
        butLoading.value = false
        logger.error('[updateOrderApi] 修改订单失败:', error)
    }
}

const handleBlurName = () => {
    if (phone.value === '') {
        phoneTips.value = '请填写手机号'
    } else if (!test.mobile(phone.value)) {
        phoneTips.value = '请填写正确的手机号'
    } else {
        phoneTips.value = ''
    }
}
onLoad(e => {
    // 从个人中心跳转的携带的参数 订单状态
    if (e.orderNo) {
        orderNo.value = e.orderNo
    }
})
</script>

<style scoped lang="scss">
.but {
    height: 88rpx !important;
    background: $uni-color-primary;
}
.info-list {
    border-bottom: 1px solid $uni-bg-color-hover;
    .height {
        height: 96rpx;
    }
}
.info-in {
    position: relative;
}
.error-msg {
    border-top: 1px solid $uni-color-error;
    color: $uni-color-error;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
}
</style>
